<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>欢迎</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	
	<link rel="stylesheet" type="text/css" href="css/login.css">
	
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
			*{
				padding: 0px;
				margin: 0px;
				border: 0px;
				touch-action: pan-y;
			}
			/*这里获取浏览器显示区域100%的宽高*/
			html{
				width: 100%;
				height: 100%;
			}
			/*继承*/
			body{
				width: 100%;
				height: 100%;
			}
			body .bian {
				border-radius: 100%;
				width: 20px;
				height: 20px;
				background: rgba(0, 0, 0, 0.342);
				position: absolute;
				animation: bian 0.5s linear both 1;
			} 
			/*动画效果，从实体到透明，从小到大*/
			@keyframes bian {
				0% {
					opacity: 1;
					transform: scale(1)
				}

				100% {
					opacity: 0;
					transform: scale(8)
				}
			}
		</style>
  </head>
  <body>
  <div id="s1">
  <div id="s2" ><b>欢迎使用名片管理系统</b></div> 
  
    	<form action="LogIn"  method="post" id="form1" role="form">
    	<div class="form-group">
		<label class="s3"><span class="glyphicon glyphicon-user"></span>用户名</label><input  id="s5" placeholder="请输入用户名" type="text" class="form-control" name="username" > <br>
		<label class="s4"> <span class="glyphicon glyphicon-lock"></span>密码</label><input id="s6" placeholder="请输入密码" type="password" class="form-control " name="password"><br>
		<div class="input-group" id="box2">	
           <span>
           <font size="3" >图形验证码：</font>
           </span>
           <input type="tel" id="checkpicture"  placeholder="注意区分大小写" onblur="checkpicture()"/>
           <span>
           <canvas id="canvas" width="120" height="45"></canvas>
           </span>
           <p align="right">
           		<a href="#" id="changeImg">
           			<font color="blue" size="4" style="text-shadow: 0px 0px 5px #8A2BE2;">看不清，换一张
           			</font>
           		</a>
           	</p>
             <div id="changeplace"></div>
        </div>
		<button  id="s7" class="btn btn-info" type="submit" value="登录" onclick="return CheckAndSubmit()">登录</button>
		<button id="s8"  class="btn btn-info" type="submit" onClick="window.open('/CardSystem3.0/register/user_register_submit.jsp')">注册</button>
	</div>
	</form>
</div>
<script>
function CheckAndSubmit(){
	if(checkpicture())
	{
		document.getElementById("form1").submit();
		return true;
	}else return false;
		
}

var string="";
  /**生成一个随机数**/
  function randomNum(min,max){
    return Math.floor( Math.random()*(max-min)+min);
  }
  /**生成一个随机色**/
  function randomColor(min,max){
    var r = randomNum(min,max);
    var g = randomNum(min,max);
    var b = randomNum(min,max);
    return "rgb("+r+","+g+","+b+")";
  }
  drawPic();
  document.getElementById("changeImg").onclick = function(e){
    e.preventDefault();
    drawPic();
  }
 
  /**绘制验证码图片**/
  function drawPic(){
    var canvas=document.getElementById("canvas");
    var width=canvas.width;
    var height=canvas.height;
    var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';
 
    /**绘制背景色**/
    ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
    ctx.fillRect(0,0,width,height);
    /**绘制文字**/
    var str = 'ABCEFGHJKLMNPQRSTWXYqwertyuiopasdfghjklzxcvbnm123456789';
    string="";
    for(var i=0; i<4; i++){
    	
      var txt = str[randomNum(0,str.length)];
      string+=txt;
      ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
      ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
      var x = 10+i*25;
      var y = randomNum(25,45);
      var deg = randomNum(-45, 45);
      //修改坐标原点和旋转角度
      ctx.translate(x,y);
      ctx.rotate(deg*Math.PI/180);
      ctx.fillText(txt, 0,0);
      //恢复坐标原点和旋转角度
      ctx.rotate(-deg*Math.PI/180);
      ctx.translate(-x,-y);
    }
    /**绘制干扰线**/
    for(var i=0; i<8; i++){
      ctx.strokeStyle = randomColor(40,180);
      ctx.beginPath();
      ctx.moveTo( randomNum(0,width), randomNum(0,height) );
      ctx.lineTo( randomNum(0,width), randomNum(0,height) );
      ctx.stroke();
    }
    /**绘制干扰点**/
    for(var i=0; i<100; i++){
      ctx.fillStyle = randomColor(0,255);
      ctx.beginPath();
      ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
      ctx.fill();
    }
  }
  
  function checkpicture()
  {
	  
	  var checkpicture=document.getElementById("checkpicture").value;
	  if(checkpicture==""||checkpicture==null){
		  document.getElementById("changeplace").innerHTML="验证码不能为空";
	      return false;
 	            }
	  else if(checkpicture!=string){
		  
		  document.getElementById("changeplace").innerHTML="验证码不正确，请重新输入";
		  return false;
	 }
	  else if(checkpicture==string)
		  document.getElementById("changeplace").innerHTML="验证码正确，可以提交";
	  return true;
	  
  }
  
  </script>
  <script>
			//获取鼠标点击位置的xy
			function getMousePos(event) {
				   var e = event || window.event;
				   var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
				   var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
				   var x = e.pageX || e.clientX + scrollX;
				   var y = e.pageY || e.clientY + scrollY;
				   return { 'x': x, 'y': y };
			}
			/*获取body的DOM*/
			var main = document.querySelector('body');
			/*鼠标每次在body的宽高内移动就会重新加载一次鼠标位置，这样点击后动画会更快的播放*/
			main.onmousemove = function (e) {
				let MouseXY = getMousePos(e);
				var x = MouseXY['x'];
				var y = MouseXY['y'];
				console.log(x, y);
				main.onclick = function () {
					var div = document.createElement('div');
					div.setAttribute("class","bian");
					div.style.left = x + 'px';
					div.style.top = y + 'px';
					/*随机颜色*/
					var r = Math.floor(Math.random() * 256)
					var g = Math.floor(Math.random() * 256)
					var b = Math.floor(Math.random() * 256)
					div.style.background = "rgb(" + r + ',' + g + ',' + b + ")";
					main.appendChild(div);
					setTimeout(function () {
						main.removeChild(div);
					}, 600)
				}
			}
		</script>
  </body>
</html>
